<nz-modal [(nzVisible)]="visible" nzTitle="" (nzOnCancel)="handleCancel()" (nzOnOk)="submitForm()"
  [nzOkLoading]="isOkLoading" nzWidth="5.55rem" nzWrapClassName="vertical-center-modal" nzOkDisabled="false"
  [nzStyle]="{ top: '2.4rem' }" [nzOkText]='null' [nzCancelText]='null' [nzFooter]="addUserFooter" class="add-users">
  <form [formGroup]="userInfoForm" style="background-color: #353c70;">
    <div class="title">
      <!-- <i class="iconfont icon-add_user"></i> -->
      <i class="add-user-dot"></i>
      {{'UserManagement.ManageUser.' + title | translate}}
    </div>
    <!-- 分割线 -->
    <div class="hrs"></div>


    <div class="details">
      <!-- <div class="id">
        <p>Name</p>
        <input nz-input [placeholder]="'' | translate" style="width:3.07rem" formControlName="userId" />
        <p style="width:3.07rem"  formControlName="userId"></p>
      </div> -->
      <!-- <nz-form-item style="margin-top:0.5rem;" class="id">
          <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired>
            {{'UserManagement.ManageUser.UserID' | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <p id="userId">asdasd</p>
          </nz-form-control>
        </nz-form-item> -->
      <nz-form-item class="name" >
        <nz-form-label [nzSm]="6" [nzXs]="24">
          {{'UserManagement.ManageUser.Name' | translate}}</nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24">
          <input nz-input [placeholder]="'' | translate" formControlName="user_Name" />
          <nz-form-explain *ngIf="userInfoForm.get('user_Name')?.dirty && userInfoForm.get('user_Name')?.errors">
            {{'UserManagement.ManageUser.MandatoryWarning' | translate}}
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <!-- <nz-form-item class="password" *ngIf="title !== 'Edit_User'">
        <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired>
          {{'UserManagement.ManageUser.Password' | translate}}</nz-form-label>
        <nz-form-control [nzSm]="15" [nzXs]="24">
          <input nz-input type="password" [placeholder]="'' | translate" formControlName="user_Pwd" />
          <nz-form-explain *ngIf="userInfoForm.get('user_Pwd')?.dirty && userInfoForm.get('user_Pwd')?.errors">
            {{'UserManagement.ManageUser.MandatoryWarning' | translate}}
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item> -->
      <nz-form-item *ngIf="title === 'Edit_User'">
        <nz-form-label [nzSm]="6" [nzXs]="24" nzNoColon="true">{{'UserManagement.ManageUser.Password' | translate}}
        </nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24"><button nz-button nzType="danger" nzBlock
            (click)="showResetPassword()">{{'UserManagement.ManageUser.reset_password' | translate}}</button>
        </nz-form-control>

      </nz-form-item>

      <!-- <nz-form-item class="organization">
        <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired>
          {{'UserManagement.ManageUser.Organization' | translate}}</nz-form-label>
        <nz-form-control [nzSm]="15" [nzXs]="24">
          <input nz-input [placeholder]="'' | translate" formControlName="organization"/>
          <nz-form-explain *ngIf="userInfoForm.get('organization')?.dirty && userInfoForm.get('organization')?.errors">
            {{'UserManagement.ManageUser.MandatoryWarning' | translate}}
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item> -->
      <nz-form-item class="organization">
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="role">
          {{"UserManagement.ManageUser.Organization" | translate}}
        </nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24">
          <nz-select formControlName="organization" nzAllowClear [nzPlaceHolder]="'' | translate">
            <nz-option *ngFor="let item of listOfOption" [nzLabel]="item.organization_Name"
              [nzValue]="item.organization_Name"></nz-option>
          </nz-select>
          <nz-form-explain *ngIf="userInfoForm.get('organization')?.dirty && userInfoForm.get('organization')?.errors">
            {{'UserManagement.ManageUser.MandatoryWarning' | translate}}
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item class="role">
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="role">{{"UserManagement.ManageUser.Role" | translate}}
        </nz-form-label>
        <nz-form-control [nzSm]="18" [nzXs]="24">
          <nz-select formControlName="userRole" nzAllowClear [nzPlaceHolder]="'' | translate">
            <nz-option *ngFor="let item of roleOptions" [nzLabel]="item.roleName" [nzValue]="item.userRole_Id">
            </nz-option>
          </nz-select>
          <nz-form-explain *ngIf="userInfoForm.get('userRole')?.dirty && userInfoForm.get('userRole')?.errors">
            {{'UserManagement.ManageUser.MandatoryWarning' | translate}}
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item class="zoneAssignment zoneTree" *ngIf="isShowZone">
        <nz-form-label [nzSm]="6" [nzXs]="24">
          {{"UserManagement.ManageUser.ZoneAssignment" | translate}}
        </nz-form-label>
        <nz-form-control>
          <nz-form-explain class="ZoneChoose-tree">
            <nz-tree #nzTree [nzData]="zoneAssignment" nzCheckable nzMultiple [nzCheckedKeys]="defaultCheckedKeys"
              [nzExpandedKeys]="defaultExpandedKeys" [nzSelectedKeys]="defaultSelectedKeys" (nzClick)="nzEvent($event)"
              (nzExpandChange)="nzEvent($event)" (nzCheckBoxChange)="nzEvent($event)">
            </nz-tree>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

    </div>
  </form>

  <ng-template #addUserFooter>
    <div class="btn-center">
      <button (click)="handleCancel()" nz-button nzType="default">
        {{'UserManagement.ManageOrganization.Cancel' | translate}}
      </button>
      <button (click)="submitForm()" nz-button nzType="primary" class="botm-margin">
        {{'UserManagement.ManageOrganization.Save' | translate}}
      </button>
    </div>
  </ng-template>
</nz-modal>